<template>
  <div class="info-image" @click="showDialog">
    <el-avatar :size="100" :src="imgSrc" />
    <span class="info-edit">
      <i class="el-icon-lx-camerafill"></i>
    </span>
  </div>
  <el-dialog :title="props.title" v-model="dialogVisible"  width="600px">
    <vue-cropper
      ref="cropper"
      v-loading="loading"
      :src="imgSrc"
      :ready="ReadcropImage"
      :zoom="cropImage"
      :cropmove="cropImage"
      style="width: 100%; height: 400px"
    ></vue-cropper>

    <template #footer>
      <span class="dialog-footer">
        <!-- <el-upload
        ref="uploadRef"
        class="upload-demo"
        name="source"
        method="post"
       :multiple="true"
       :headers="uploadHeader"
        action="https://imgloc.com/api/1/upload"
        :auto-upload="false"
      >
        <template #trigger>
          <el-button type="primary">select file</el-button>
        </template>

        <el-button class="ml-3" type="success" @click="submitUpload">
          upload to server
        </el-button>

        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload> -->
        <el-button class="crop-demo-btn" type="primary"
          >选择图片
          <input
            class="crop-input"
            type="file"
            name="image"
            accept="image/*"
            @change="setImage"
          />
        </el-button> -->
         <el-button type="primary" @click="saveAvatar">上传并保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="editimg">
import { reactive,defineComponent, ref } from "vue";
import VueCropper from "vue-cropperjs";
import { ElMessage, ElMessageBox } from "element-plus";
import "cropperjs/dist/cropper.css";
import { defineEmits, defineProps } from "vue";
import {UploadImage, UploadImageQN} from "../api/index";
import { el } from "element-plus/es/locale";
const init = ()=>{

  imgSrc.value = props.imgSrc
}
const emit = defineEmits(["getImage"]);//需要“注册”事件名

const props = defineProps(["imgSrc","title","avatarImg"]);
const imgSrc =  ref("");
const cropImg = ref("");
const dialogVisible = ref(false);
const loading = ref(false);
const cropper: any = ref();
init()
const showDialog = () => {
  dialogVisible.value = true;
  imgSrc.value = props.imgSrc
};

const setImage = (e: any) => {
  const file = e.target.files[0];
  if (!file.type.includes("image/")) {
    return;
  }
  const reader = new FileReader();
  reader.onload = (event: any) => {
    console.log(event)
    dialogVisible.value = true;
	imgSrc.value=event.target.result;
  // avatarImg=event.target.result;
    cropper.value && cropper.value.replace(event.target.result);
  };
  reader.readAsDataURL(file);
};

const ReadcropImage = () => {
  if(props.imgSrc!=""){
    cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
  }
  
};
const cropImage = () => {
    cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
  
};

const saveAvatar = () => {
  let postParm ={
    image:cropImg.value,
    album:"2DNc"
  }
  loading.value=true
  UploadImageQN(postParm).then((res:any)=>{
    loading.value=false
    if(res.data.data!="重复上传"){
      ElMessage.success("图片上传成功");
      emit("getImage", res.data.data);//这里去emit事件和传递参数
      dialogVisible.value = false;
    }else{
      ElMessage.error("图片已存在");
    }
  })
  
  // avatarImg= cropImg.value;
  // cropImg.value="";

};
</script>

<style scoped>
.info {
  text-align: center;
  padding: 35px 0;
}
.info-image {
  position: relative;
  /* margin: auto; */
  width: 100px;
  height: 100px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 50px;
  overflow: hidden;
}

.info-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.info-edit i {
  color: #eee;
  font-size: 25px;
}
.info-image:hover .info-edit {
  opacity: 1;
}
.info-name {
  margin: 15px 0 10px;
  font-size: 24px;
  font-weight: 500;
  color: #262626;
}
.crop-demo-btn {
  position: relative;
}
.crop-input {
  position: absolute;
  width: 100px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
